<template>
  <div>
    <button class="goCheck" @click="checkShow" v-if="myGocheck">去核销</button>
    <button class="goPay" v-if="myGoPay">去支付</button>
    <button class="cancelOrder" @click="cancelOrder" v-if="myCancelOrder">取消订单</button>
    <button class="lookDetails" v-if="mylookDetails">查看团详情</button>
    <button class="lookExpress" v-if="myLookExpress">查看物流</button>
    <button class="sureGet" @click="sureGet" v-if="mySureGet">确认收货</button>
    <button class="goComment" @click="commentShow" v-if="myGoComment">去评价</button>


  </div>

</template>

<script>
  import {Dialog} from 'vant';

  export default {
    name: "goodsboxButton",
    data() {
      return {
        checkshow: false,
        myGocheck: false,
        myGoPay: false,
        myCancelOrder: false,
        mylookDetails: false,
        myLookExpress: false,
        mySureGet: false,
        myGoComment: false
      }
    },
    props: [
      'payState',
      'checkPic',
      'myValue',
      'msg',
      'checkFlag',
      'commentFlag'
    ],
    created() {
      if (this.payState == "待付款") {
        this.myGoPay = true;
        this.myCancelOrder = true;
      } else if (this.payState == "待成团") {
        this.mylookDetails = true;
      } else if (this.payState == '待核销') {
        this.myGocheck = true;
      } else if (this.payState == '待发货') {
        this.myCancelOrder = true;
        this.myLookExpress = true;
      } else if (this.payState == '待收货') {
        this.myLookExpress = true;
        this.mySureGet = true;
      } else if (this.payState == '待评价') {
        this.myGoComment = true;
      }
    },
    computed: {},
    methods: {
      cancelOrder() {
        this.$dialog.confirm({
          // title: "hello",
          message: "您确定取消订单吗？",
          confirmButtonText: "确定", //改变确认按钮上显示的文字
          cancelButtonText: "取消" //改变取消按钮上显示的文字
        }).then(() => {
          console.log("点击了确认按钮噢")
        }).catch(() => {
          console.log("点击了取消按钮噢")
        })
      },
      checkShow() {
        this.$emit('changeCheckState');
      },
      commentShow() {
        this.$emit('changeCommentState')
      },
      sureGet() {
        this.$dialog.confirm({
          // title: "hello",
          message: "您确定收到货物了吗？",
          confirmButtonText: "确定", //改变确认按钮上显示的文字
          cancelButtonText: "取消" //改变取消按钮上显示的文字
        }).then(() => {
          console.log("点击了确认按钮噢")
        }).catch(() => {
          console.log("点击了取消按钮噢")
        })
      },
    },
    components: {
      [Dialog.Component.name]: Dialog.Component,
    }
  }
</script>

<style scoped>

  button {
    height: 25px;
    line-height: 25px;
    margin: 5px 5px 5px 5px;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 1px white inset;
    color: #4e4e4e;
    font-size: 13px;
    padding: 0 5px;
    border-radius: 15px;
    outline: none;
    /*text-shadow: 0 1px 1px black;*/
    float: right;
  }

  button:active {

    box-shadow: .05em .1em .2em rgba(0, 0, 0, .6) inset;

    border-color: rgba(0, 0, 0, .3);

  }


  .commentArea {
    clear: both;
  }

  .commentHead {
    height: 30px;
    width: 100%;
    border-bottom: 1px solid silver;
    margin-bottom: 5px;
    padding-left: 10px;
    line-height: 30px;
    font-weight: 300;
    font-size: 14px;
    text-align: left;
  }

  .commentStar {
    width: 100%;
    height: 30px;
    border-bottom: 1px solid silver;
    margin-bottom: 5px;
    padding-left: 10px;
    line-height: 30px;
    font-size: 14px;
    font-weight: 300;
  }

  .commentStar span {
    float: left;
  }

  .star {
    float: left;
    margin-top: 4px;
  }


</style>
